<template>
  <Poptip v-model="visible" width="280" placement="left" :word-wrap="true">
    <Button size="small" type="text">
      <Icon custom="iconfont icon-interaction-vars" size="13"/>
    </Button>
    <div slot="content" style="max-height: 250px;">
      <p class="float-left">当前页面内所有可用交互变量</p>
      <Tooltip class="float-right" content="刷新" placement="top">
        <a href="javascript:;" class="color-white" @click.stop="loadData"><Icon type="md-refresh" /></a>
      </Tooltip>
      <Alert style="float: left; padding: 2px; text-align: justify; margin-bottom: 0px; margin-top: 3px;">不包含自定义JS脚本中发起的交互变量</Alert>
      <div class="clearfix"></div>
      <Divider style="margin: 5px 0px 5px 0px;"/>
      <Tag color="success" style="cursor: text;" v-for="(item, index) in currentPageAllBindingVariateNames" :key="index">{{ item }}</Tag>
      <p style="text-align: center; padding: 8px;" v-if="currentPageAllBindingVariateNames.length == 0">当前页面无相关可用交互变量</p>
    </div>
  </Poptip>
</template>

<script>

export default {
  name: "PageAllBindingVariateNamesPoptip",
  props: {
    show: {
      type: Boolean
    }
  },
  data() {
    return {
      visible: false,
      currentPageAllBindingVariateNames: []
    }
  },
  mounted() {

  },
  methods: {
    loadData () {
      let layoutItems = this.$store.getters['designer/getLayoutItems'];
      this.currentPageAllBindingVariateNames = this.$DesignerCommonUtil.getPageAllBindingVariateNames(layoutItems);
    }
  },
  computed: {},
  watch: {
    visible(val) {
      if (val) {
        this.loadData()
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
